<template>
  <div class="bg-[#f7f7f7]">
    <div class="relative">
      <img src="~/assets/img/guanyuwmen.webp" class="size-full absolute z-10" alt="" />
      <div class="max-lg:px-4 mx-auto max-w-7xl">
        <div class="w-full lg:h-[38.94rem] h-[23rem] flex flex-col justify-evenly">
          <h1 class="font-semibold lg:text-[3rem] text-[1.5rem] text-white z-20">About SEALMG</h1>
          <p class="font-normal lg:text-[1.25rem] text-white lg:w-2/3 text-[0.75rem] line-clamp-3 z-20">
            Welcome to SEALMG! This is a trusted online store for game top-ups, gift cards, mobile recharging, and more. We're committed to providing
            instant, secure, and affordable recharge services for over 5,000 products, at a lower price, including PUBG, Free Fire, Mobile Legends,
            Google Play gift cards, and more.
          </p>
          <div class="max-lg:grid max-lg:grid-cols-3 lg:flex max-lg:gap-5 lg:items-center lg:justify-around lg:grid-cols-5">
            <div class="flex flex-col row-span-1 gap-2 justify-center items-center" v-for="(item, index) in serviceList" :key="index">
              <div
                class="lg:size-[2.75rem] size-[2rem] bg-[rgba(255,255,255,0.3)] flex items-center justify-center lg:rounded-[0.75rem] rounded-[0.5rem] backdrop-blur-[10px] z-20"
              >
                <!-- <div
                  :style="'background-image: url(' + i.image + ')'"
                  class="lg:size-[1.5rem] size-[1rem]"
                ></div> -->
                <img
                  v-lazy="item.image"
                  class="lg:size-[1.5rem] size-[1rem]"
                  :alt="item.name + ' icon'"
                  :title="item.name + ' service'"
                  loading="lazy"
                />
              </div>
              <span class="font-medium lg:text-[0.88rem] text-[0.66rem] text-white z-20">
                {{ item.name }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="max-lg:px-4 lg:py-12 flex z-20 flex-col py-5 mx-auto max-w-7xl">
      <h2 class="font-bold lg:text-[2rem] text-[1.25rem] text-black lg:text-center">What can we do?</h2>
      <p class="font-medium lg:text-[1rem] text-[0.75rem] text-[#6B7280] lg:text-center">
        With a mission to simplify in-game purchases globally, we offer:
      </p>
      <div class="grid lg:grid-cols-2 grid-cols-1 gap-[1.75rem] lg:mt-12 mt-4">
        <div class="lg:p-[1.75rem] p-4 flex lg:gap-[1.75rem] gap-1 bg-white rounded-[0.5rem]" v-for="(feature, index) in featureList" :key="index">
          <img
            v-lazy="feature.image"
            class="lg:size-[7.5rem] size-[3rem] flex-none"
            :alt="feature.name + ' feature'"
            :title="feature.name + ' service feature'"
            loading="lazy"
          />
          <div class="flex flex-col justify-center">
            <h3 class="font-medium text-[0.88rem] lg:text-[1.5rem] text-[#030712]">
              {{ feature.name }}
            </h3>
            <p class="font-medium text-[0.69rem] lg:text-[1rem] text-[#6B7280] normal-case">
              {{ feature.description }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    layout: 'newsHome',
    data() {
      return {
        serviceList: [], // 服务类型列表
        featureList: [] // 特性列表
      }
    },
    head: {
      title: 'About Us - SEALMG',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content:
            'SEALMG is the fastest-growing global platform for gamers and digital enthusiasts. Discover a wide range of games, gift cards, and top-ups - all in a safe, secure, and affordable way.'
        }
      ]
    },
    watch: {},
    vccomputed: {},
    created() {
      this.serviceList = [
        {
          name: 'Game Cards',
          image: `https://cd.sealmg.com/assets/img/about9.png`
        },
        {
          name: 'Gift Cards',
          image: `https://cd.sealmg.com/assets/img/about6.png`
        },
        {
          name: 'Mobile Recharge',
          image: `https://cd.sealmg.com/assets/img/about8.png`
        },
        {
          name: 'Video Streaming',
          image: `https://cd.sealmg.com/assets/img/about7.png`
        },
        {
          name: 'Shopping',
          image: `https://cd.sealmg.com/assets/img/about5.png`
        }
      ]
      this.featureList = [
        {
          name: 'Digital Products & Services',
          d: 'Instant top-ups for games, gift cards, video streaming apps, etc.',
          image: `https://cd.sealmg.com/assets/img/about3.png`
        },
        {
          name: '100% Buyer & Seller Protection',
          d: 'Secure payment methods to safeguard your wallet.',
          image: `https://cd.sealmg.com/assets/img/about1.png`
        },
        {
          name: 'Low Fees',
          d: 'Exclusive discounts to save you money.',
          image: `https://cd.sealmg.com/assets/img/about2.png`
        },
        {
          name: 'Awesome Support',
          d: 'Online live support to solve your problems anytime.',
          image: `https://cd.sealmg.com/assets/img/about4.png`
        }
      ]
    },
    methods: {}
  }
</script>
<style lang="less" scoped></style>
